<template>
    <el-dialog :title="details.title" :visible.sync="showDialog" width="30%" :showEdit="showEdit"
    @close="$emit('update:showEdit', false)">
        <el-form :model="form">
            <el-form-item :label='$t("rangeEdit.range_code") + ":"' :label-width="formLabelWidth">
                <el-input v-model="details.range.range_code" autocomplete="off" :width="formLabelWidth" disabled></el-input>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item :label='$t("rangeEdit.from")' :label-width="formLabelWidth">
                <el-col :span="4">
                    <el-input-number v-model="details.range.range_from" :min="0" :max="1000000" :disabled="details.disabled"></el-input-number>
                     
                </el-col>
            </el-form-item>
            <el-form-item :label='$t("rangeEdit.to")' :label-width="formLabelWidth">
                <el-col :span="4">
                   <el-input-number v-model="details.range.range_to" :min="0" :max="1000000" :disabled="details.disabled"></el-input-number>
                </el-col>
            </el-form-item>
        </el-form>
        <el-form :model="form">
            <el-form-item :label='$t("rangeEdit.status")' :label-width="formLabelWidth">
                <el-switch
                    v-model="details.range.range_status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="Active"
                    inactive-value="Inactive"
                    :disabled="details.disabled">
                </el-switch>
            </el-form-item>
        </el-form>
        <!-- <el-form :model="form">
            <el-form-item :label='$t("rangeEdit.type")' :label-width="formLabelWidth">
                <el-input v-model="details.range.range_type" autocomplete="off" :width="formLabelWidth" disabled></el-input>
            </el-form-item>
        </el-form> -->
        <span slot="footer" class="dialog-footer">
            <el-button :size="button.size" @click="handleCancel">{{$t("rangeEdit.cancel")}}</el-button>
            <el-button v-if="details.action === 'Edit'" type="primary" :size="button.size" @click="handleSubmit">{{$t("rangeEdit.save")}}</el-button>
        </span>
    </el-dialog>
</template>


<script>
export default {
    name: 'EditRange',
     props: {
        showEdit: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        details: {
            type: Object
        }
    },
    data() {
        return {
            showDialog: this.showEdit,
            button: {
                size: 'small'
            },
            form: {
                range_code: '',
                range_from: '',
                range_to: '',
                status: '',
                type: '',
                action: 'Edit'
            },
            formLabelWidth: '100px'
        }
    },
    methods: {
        handleSubmit(event){
            let data = {
                id: this.details.range.id,
                range_code: this.details.range.range_code,
                range_from: this.details.range.range_from,
                range_to: this.details.range.range_to,
                status: (this.details.range.range_status === 'Active' ? 1 : 0),
                type: this.details.range.type,
                action: this.form.action
            }

            if (data.range_code !== '') {
                if (data.range_from > 0 && (data.range_to > 0 && data.range_to > data.range_from)) {
                    if (data.range_code !== '') {
                        this.$emit('ok', data)
                        this.$emit('update:showEdit', false)
                        this.showDialog = false
                    }else {
                        this.handleErrorMessage(event, 'error', this.handleMessage('', 1))
                    }
                }else{
                    this.handleErrorMessage(event, 'info', this.handleMessage('', 2))    
                }
            }else {
                this.handleErrorMessage(event, 'info', this.handleMessage('', 3))
            }
        },
        handleMessage(value, flag) {
            let message = ''
            switch(flag) {
                case 1:
                    message = this.$t('rangeAdd.error_add')
                    break
                case 2:
                    message = this.$t('rangeAdd.error_fromto')
                    break
                case 3:
                    message = this.$t('rangeAdd.error_empty')
                    break
            }
            return message
        },
        handleErrorMessage(event, dynamicVariant, message) {
            event.preventDefault();
            this.$message({message: message, type: dynamicVariant})
        }, 
        handleCancel() {
            this.showDialog = false
        },
        between(x, min, max) { 
            return x >= min && x <= max;
        }
    },
    watch: {
      showChange() {
        this.showDialog = this.showEdit
      }
    }
}

export const enRangeEdit = { 
    //General
    range_code: 'Range Code',
    from: 'From:',
    to: 'To:',
    status: 'Status:',
    type: 'Type:',

    //Actions
    save: 'Save',
    cancel: 'Cancel',

    //Dialogue
    content: 'Are you sure to close this dialog?',

    //Error Message
    error_exists: ' already exists!',
    error_add: 'Error on adding new range. Please try again!',
    error_fromto: 'Please check the range from and to.',
    error_empty: 'Please input a range code.'
}

export const zhRangeEdit = {
    //General
    range_code: '范围代码:',
    from: '从:',
    to: '至:',
    status: '状态:',
    type: '类型:',

    //Actions
    save: '保存',
    cancel: '取消',

    //Dialogue
    content: '你确定要关闭这个对话框?',

    //Error Message
    error_exists: ' 已经存在!',
    error_add: '添加新范围时出错。请再试一次!',
    error_fromto: '请检查从和到的范围',
    error_empty: '请输入范围代码'
}
</script>
